<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Expedia国家-城市列表</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.2.6.4.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        .oprate_btn{margin:4px 10px 4px 0;font-size:12px;}
        .marginLeft0{margin-left: 0}
        tr{height:50px;}
    </style>
</head>
<body>
<div class="layui-fluid main">
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="compatibility">Expedia酒店的大洲和国家数据</a></legend>
    </fieldset>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">
    <div class="layui-form">
        <div class="layui-form-item layui-inline">
            <div class="layui-form-label">请选择国家</div>
        </div>
        <div class="layui-form-item layui-inline">
            <select name="continent" id="continent" lay-filter="select_continent" lay-search="" class="layui-select">
                <option value="">请选择大洲</option>
                {notempty name="$continents"}{volist name="continents" id="continent_v"}
                <option value="{$continent_v.eId}" data-ename="{$continent_v.nameEn|default=''}" data-pid="{$continent_v.pid|default=0}" {if $continent_v.nameEn=='Asia'}selected{/if}>{if !empty($continent_v.isBound)} √️ {/if}{$continent_v.name} ({$continent_v.nameEn})</option>
                {/volist}{/notempty}
            </select>
        </div>
        <div class="layui-form-item layui-inline">
            <select name="country" id="country" lay-filter="select_country" lay-search="" class="layui-select">
                <option value="">请选择国家</option>
                {notempty name="$countries"}{volist name="countries" id="country_v"}
                <option value="{$country_v.eId}" data-pid="{$country_v.pid}" {if $country_v.nameEn=='China Mainland'}selected{/if}>{if !empty($country_v.isBound)} √️ {/if}{$country_v.name} ({$country_v.nameEn})</option>
                {/volist}{/notempty}
            </select>
        </div>
        <div class="layui-form-item layui-inline">
            <span style="color: green;margin-left: 8px;"><i style="margin-right: 4px;" class="layui-icon layui-icon-tips"></i>对勾表示已经和定制系统的国家城市关联</span>
        </div>
    </div>
</fieldset>
<table id="test" lay-filter="test" lay-size="sm" class="layui-table" lay-even="true" lay-skin="row"></table>

<script type="text/html" id="barToolDemo">
    <a class="layui-btn layui-btn-xs" lay-event="info">详情</a>
    <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="poi">POI</a>-->
</script>
</div>
</body>
<script src="__PUBLIC__/layui/layui.2.5.6.all.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer','form','table','jquery'],function() {
        let table = layui.table;
        let form = layui.form;

        // 字段配置
        const cols = [[
            {field:'eId', title:'ID',fixed:'left'}
            ,{field:'name', title:'名称',templet:function (d) {
                    var ok = '';
                    if(d.isBound){
                        ok = ' √️ ';
                    }
                    return ok + d.name;
                }}
            ,{field:'nameEn', title:'英文名'}
            ,{field: '', title: '操作', width:80,fixed:'right',toolbar: '#barToolDemo'}
        ]];


        // 表格配置
        const objTable = {
            elem: '#test'
            ,cols: cols
            ,id: 'list'
            ,page: true
            ,cellMinWidth:120
            ,done:function(res, curr, count) {

            }
            ,parseData:function(res) {
                console.log(res);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,loading:true
        }
        let table_url = '/admin/expediacity/getCityByCountryId?eId=';
        objTable.url = table_url + '37';
        table.render(objTable);
        //根据大洲获取国家
        var select_continent_id = '';
        form.on('select(select_continent)',function (data) {
            if(select_continent_id==data.value){return false;}
            select_continent_id = data.value;
            var eId = data.value;console.log(eId);
            var loading = layer.load(2);
            $.post('/admin/expediacity/getCountryByContinentId',{eId},function (res) {
                layer.close(loading);
                if(res.code > 0){
                    $('select[name=country] option:not(:first-child)').remove();
                    var option ='';
                    $.each(res.data,function (i,v) {
                        option += '<option value="'+v.eId+'" data-pid="'+eId+'">'+v.name+'</option>';
                    })
                    $('select[name=country]').append(option);
                    form.render('select');
                }else{
                    layer.msg(res.msg);return false;
                }
            })
        })
        var select_country_id = '';
        form.on('select(select_country)',function (data) {
            if(select_country_id==data.value){return false;}
            select_country_id = data.value;
            var eId = data.value;console.log(eId,data);
            var pid = $('select[name=country] option:selected').attr('data-pid');console.log(pid)
            //赋值大洲
            $('select[name=continent]').val(pid);
            form.render('select');
            // tableTree 渲染表格
            objTable.page = 1;
            objTable.limit = 50;
            objTable.url = table_url + eId;
            table.render(objTable);
            return false;
        })

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'poi'){
                var url = '/admin/expediacity/expediaCityPoi?eId=' + data.eId;
            } else if(obj.event === 'info'){
                var url = '/admin/expediacity/expediaCityInfo?eId=' + data.eId;
            }
            window.location.href = url;
            return false;
        });

    })
</script>
</html>